<template>
  <view class="detail">
    <!-- 头部 -->
    <!--  -->
    <view class="det-header" :style="{ opacity: topTabOpacity, zIndex: topTabOpacity >0.2?'1':'-1'}">
      <view :class="['item', topTabSts === 0? 'active' : '']" @tap="hanleTopTabClick(0)">商品</view>
      <view :class="['item', topTabSts === 2? 'active' : '']" @tap="hanleTopTabClick(2)">详情</view>
    </view>

    <!-- 大图 -->
    <swiper class="pic-box" indicator-dots="true" indicator-color="rgba(255,252,255, .3)" indicator-active-color="rgba(255,252,255, .6)" autoplay="true" circular="true">
      <swiper-item v-for="(img, imgIdx) in imgList" :key="imgIdx" class="item">
        <image :src="img" />
      </swiper-item>
    </swiper>

    <!-- 名称、价格 -->
    <view class="name-box">
      <view class="name">{{ prodInfo.name }}</view>
      <view class="action-box">
        <view class="price-box">
          <view class="price">
            <view class="symbol">￥</view>
            <view class="big">{{ wxs.parsePrice(defaultSku.priceFee)[0] }}</view>
            <view class="symbol">.{{ wxs.parsePrice(defaultSku.priceFee)[1] }}</view>
          </view>
          <view class="stock">仅剩{{ defaultSku.stock }}件</view>
        </view>
      </view>
    </view>

    <!-- sku、配送 -->
    <view class="det-con">
      <view class="item">
        <view class="tit">已选</view>
        <view class="con sku-con" @tap="isShowSkuPopup = true">
          <view v-if="defaultSku.skuName" class="s-item">
            <block v-for="(skuItem,index) in selectedProp" :key="index">
              <text decode="true">{{ index < selectedProp.length-1 ? skuItem +'，' : skuItem+'&nbsp; &nbsp;' }}</text>
            </block>
          </view>
          {{ prodNumber }} 件
        </view>
      </view>
    </view>

    <!-- 店铺 -->
    <view class="shop-box">
      <view class="shop-info">
        <view class="info">
          <view class="img">
            <image :src="shopInfo.shopLogo" />
          </view>
          <view class="text">
            <view class="name">{{ shopInfo.shopName }}</view>
            <view class="focus-box">
              <view v-if="shopInfo.type === 1" class="self">自营</view>
            </view>
          </view>
        </view>
        <view class="go-shop" @tap="toShopIndex">进店逛逛</view>
      </view>
    </view>

    <!-- 详情 -->
    <div class="det-det">
      <div class="tit">商品详情</div>
      <div class="con">
        <rich-text :nodes="prodDetail" />
      </div>
    </div>

    <!-- 底部 -->
    <view class="det-foot">
      <view class="actions">
        <view class="item" @tap="toIndex">
          <view class="img">
            <image src="https://mm.wentsoft.com/images/detail-index.png" />
          </view>
          <view class="text">首页</view>
        </view>
        <view class="item" @tap="toCart">
          <view class="img">
            <image src="https://mm.wentsoft.com/images/detail-cart.png" />
            <view v-if="cartCount" class="mark">{{ cartCount }}</view>
          </view>
          <view class="text">购物车</view>
        </view>
      </view>
      <view class="btns">
        <view class="btn" @tap="addCart">加入购物车</view>
        <view class="btn btn-r" @tap="goSubmit">立即购买</view>
      </view>
    </view>

    <!-- 选择sku弹窗 -->
    <view class="popup" :class="{ show: isShowSkuPopup }">
      <!-- <SkuSelectPopup :prod-info="prodInfo" /> -->
      <view class="popup-mask" @tap="closePopup" />
      <view class="popup-con-bottom check-sku">
        <view class="goods-box">
          <view class="img">
            <image :src="defaultSku.imgUrl" />
          </view>
          <view class="info">
            <view class="name">{{ defaultSku.skuName }}</view>
            <view class="price">
              <view class="symbol">￥</view>
              <view class="big">{{ wxs.parsePrice(defaultSku.priceFee)[0] }}</view>
              <view class="symbol">.{{ wxs.parsePrice(defaultSku.priceFee)[1] }}</view>
            </view>
          </view>
          <view class="close" @tap="closePopup">
            <image src="/static/images/close.png" />
          </view>
        </view>
        <view class="con-box">
          <block v-for="(skuLine, key) in skuGroup" :key="key">
            <view class="sku-item">
              <view class="item-tit">{{ key }}</view>
              <view class="item-box">
                <view v-for="skuLineItem in skuLine" :key="skuLineItem" :class="['item-item',selectedProp.indexOf(skuLineItem) !== -1?'active':'', isSkuLineItemNotOptional(key,skuLineItem)? 'cannot' : '']" @tap="toChooseItem(key,skuLineItem)">
                  {{ skuLineItem }}
                </view>
              </view>
            </view>
          </block>
          <view class="prod-number">
            <view class="item-tit">数量</view>
            <view class="number-box">
              <view :class="['minus', prodNumber===1?'limit':'']" @tap="changeNumber(-1)" />
              <input v-model="prodNumber" type="number" class="number" maxlength="4">
              <view :class="['plus', isMaxProdNumber?'limit':'']" @tap="changeNumber(1)" />
            </view>
          </view>
        </view>
        <view class="btn-box">
          <view :class="['btn',defaultSku?'':'gray']" class="" @tap="skuPopupConfirm">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script module="wxs" lang="wxs" src="@/wxs/index.wxs"></script>

<script>
import { spuProdInfo, cartSave, cartCount } from '@/api/api1'
const util = require('@/utils/util')

export default {
  props: {},
  data() {
    return {
      spuId: 0, // 商品id

      shopInfo: {}, //店铺详情
      prodInfo: {}, // 商品详情
      imgList: [], // 商品轮播图
      prodDetail: '', // 商品详情富文本
      skuList: [],
      skuMap: {},
      skuGroup: {},
      defaultSku: undefined,// sku 商品规格

      isShowSkuPopup: false, // 显示sku弹窗
      isShowCommentPopup: false, // 显示评价弹窗

      topTabSts: 0, // 顶部 topTab 选中的项目
      topTabOpacity: 0, // 顶部 topTab 的透明度
      skuPopConfirmType: 0, // 规格弹窗类型: 0普通sku切换; 1加入购物车; 2立即购买

      // 优惠券
      couponList: [],

      prodNumber: 1, // 商品数量
      hasMaxNumber: 0, // 是否限购
      maxNum: 10, // 限购数量(仅团购商品) TODO:假的,以后要删的~()
      isMaxProdNumber: false, // 是否达到限购或达到最大库存
      isAddCart: false, // 当前sku弹窗是否为加购弹出

      cartCount: 0,

    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLogin() {
      return this.$store.getters.hasLogin
    },
    selectedProp() {
      let selectedProp = []
      if (!this.defaultSku) {
        return selectedProp
      }
      var propList = this.defaultSku.properties.split(";")
      for (let i = 0; i < propList.length; i++) {
        let prop = propList[i];
        selectedProp.push(prop.split(":")[1])
      }
      return selectedProp
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    if (options.spuId) {
      this.spuId = options.spuId
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    // 获取商品详情
    this.getProdInfo()

    // 获取购物车数字
    this.getCartCount()
  },

  /**
   * 页面滚动事件
   */
  onPageScroll: function(e) {
    this.topTabOpacity = e.scrollTop / 46
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() { },

  watch: {
    prodNumber(nv) {
      if (nv >= this.defaultSku.stock) {
        this.isMaxProdNumber = true
      } else {
        this.isMaxProdNumber = false
      }
    }
  },
  methods: {
    /**
     * 规格弹窗底部确定按钮
     */
    skuPopupConfirm() {
      if (!this.defaultSku.stock) {
        uni.showToast({
          title: '所选规格无货',
          duration: 2000,
          icon: 'none'
        })
        return
      }
      if (this.skuPopConfirmType === 1) {
        // 加入购物车
        cartSave({
          skuId: this.defaultSku.skuId,
          spuId: this.defaultSku.spuId,
          cartNum: this.prodNumber,
          oldSkuId: ''
        }).then(res => {
          uni.showToast({
            title: '加入购物车成功~',
            duration: 2000,
            icon: 'none'
          })
          this.getCartCount()
        })
      }
      if (this.skuPopConfirmType === 2) {
        uni.setStorageSync('shopCartItem', JSON.stringify({
          count: this.prodNumber,
          shopId: this.prodInfo.shopId,
          skuId: this.defaultSku.skuId,
          spuId: this.defaultSku.spuId
        }))
        uni.navigateTo({
          url: '/pages/goods/submitOrder/submitOrder?orderEntry=1'
        })
      }
      this.skuPopConfirmType = 0
      this.closePopup()
    },
    /**
     * 加入购物车按钮
     */
    addCart() {
      this.skuPopConfirmType = 1
      this.isShowSkuPopup = true
    },

    /**
     * 修改商品数量
     */
    changeNumber(num) {
      let prodNumber = parseInt(this.prodNumber)

      if (num < 0) { // 点击数量-
        if (prodNumber === 1) {
          return
        } else {
          prodNumber += num
        }
      } else { // 点击数量+
        // 限购判断
        if (this.hasMaxNumber) {
          if (prodNumber >= this.maxNum) {
            uni.showToast({
              title: `限购 ${this.maxNum} 件`,
              duration: 2000,
              icon: 'none'
            })
          }
          if (this.defaultSku.stock < prodNumber) {
            uni.showToast({
              title: '库存不足',
              duration: 2000,
              icon: 'none'
            })
          }
          if (prodNumber < this.maxNum) {
            prodNumber += num
          }
        } else { // 不限购
          if (prodNumber < this.defaultSku.stock) {
            prodNumber += num
          } else {
            uni.showToast({
              title: '库存不足',
              duration: 2000,
              icon: 'none'
            })
          }
        }
      }
      this.prodNumber = prodNumber
    },

    /**
     * 获取商品详情
     */
    getProdInfo() {
      uni.showLoading()
      spuProdInfo({ spuId: this.spuId }).then(res => {
        console.log(res)
        uni.hideLoading()
        let data = res.data

        this.shopInfo = {
          shopId: data.shopId,
          shopName: data.shopName,
          shopLogo: data.shopLogo,
          shopType: data.shopType,
        }

        this.prodInfo = data
        if (data.imgUrls) {
          this.imgList = data.imgUrls.split(',')
        }
        this.prodDetail = util.formatHtml(data.detail)
        console.log(data.priceFee)
        this.skuList = data.skus
        // 组装sku
        this.groupSkuProp(data.skus, data.priceFee)
      })
    },
    /**
    * 组装SKU
    */
    groupSkuProp: function(skuList, defaultPrice) {
      if (skuList.length == 1) {
        this.defaultSku = skuList[0]
        return;
      }

      let defaultSku = null;
      let skuMap = {};
      let skuGroup = {};
      for (var i = 0; i < skuList.length; i++) {
        let sku = skuList[i]
        //找到和商品价格一样的那个SKU，作为默认选中的SKU
        if (!defaultSku && sku.priceFee == defaultPrice) {
          defaultSku = sku;
        }

        // 组装属性组
        skuMap[sku.properties] = i
        var propList = sku.properties.split(";")
        for (var j = 0; j < propList.length; j++) {
          let prop = propList[j]

          var propval = prop.split(":")
          let key = propval[0]
          let value = propval[1]

          var props = skuGroup[key]
          if (props == undefined) {
            props = [];
            props.push(propval[1]);
          } else {
            if (props.indexOf(propval[1]) === -1) {
              props.push(value);
            }
          }
          skuGroup[key] = props;
        }
      }
      this.defaultSku = defaultSku
      this.skuGroup = skuGroup
      this.skuMap = skuMap
    },
    getIndexByProp(key, item) {
      var newPropertie = []
      var propList = this.defaultSku.properties.split(";")
      for (let i = 0; i < propList.length; i++) {
        let prop = propList[i];

        if (key === prop.split(":")[0]) {
          newPropertie.push(key + ":" + item)
        } else {
          newPropertie.push(prop)
        }
      }
      const index = this.skuMap[newPropertie.join(";")]
      if (index == undefined) {
        return 0
      }
      return index
    },
    /**
     * 判断当前的规格值 是否可以选
     */
    isSkuLineItemNotOptional(key, item) {

      var propList = this.defaultSku.properties.split(";")
      for (let i = 0; i < propList.length; i++) {
        let prop = propList[i];

        if (key === prop.split(":")[0] && item === prop.split(":")[1]) {
          return false
        }
      }
      return true;
    },

    /**
     * 规格点击事件
     */
    toChooseItem(key, item) {
      let index = this.getIndexByProp(key, item);
      this.defaultSku = this.skuList[index]
    },
    /**
     * 顶部Tab栏点击，页面滚动至指定位置
     * @param {number} type 0页面置顶; 1滚动至评价; 2滚动至详情
     */
    hanleTopTabClick(type) {
      this.topTabSts = type
      if (type === 0) {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 100
        });
        return
      }
      let className = ''
      className = type === 1 ? 'comment-box' : 'det-det'
      uni.createSelectorQuery().select('.' + className).boundingClientRect(data => {//目标节点
        uni.createSelectorQuery().select('.detail').boundingClientRect(res => {//最外层盒子节点
          let scrollTop = 0
          if (data.top < 0) {
            scrollTop = Math.abs(res.top) - Math.abs(data.top) - 60
          } else {
            scrollTop = Math.abs(res.top) + Math.abs(data.top) - 60
          }
          uni.pageScrollTo({
            duration: 100,
            scrollTop: scrollTop
          })
        }).exec()
      }).exec()
    },
    /**
     * 显示sku弹窗
     */
    showSkuPopup() {
      this.isShowSkuPopup = true
    },
    /**
     * 显示评论弹窗
     */
    showCommentPopup() {
      this.isShowCommentPopup = true
    },
    /**
     * 隐藏弹窗
     */
    closePopup() {
      this.isShowDiscountPopup = false
      this.isShowSkuPopup = false
      this.isShowCommentPopup = false
      this.skuPopConfirmType = 0
    },
    /**
     * 立即购买
     */
    goSubmit() {
      this.skuPopConfirmType = 2
      this.isShowSkuPopup = true
    },
    /**
     * 获取/更新购物车数据
     */
    getCartCount() {
      if (this.hasLogin) {
        cartCount().then(res => {
          this.cartCount = res.data
        })
      }
    },
    /**
     * 去首页
     */
    toIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    /**
     * 去购物车
     */
    toCart() {
      uni.switchTab({
        url: '/pages/cart/cart'
      })
    },
    /**
     * 去店铺首页
     */
    toShopIndex() {
      uni.navigateTo({
        url: `/pages/shopPage/shopIndex?shopId=${this.shopId}`
      })
    }
  }
}
</script>

<style>
@import './detail.css';
@import '@/popup.css';
</style>
